<template>
  <div class="float_list">
    <div v-for="(item, index) in list" :key="index">
      <div @click="handleBarItemClick(item, index, list)" :class="index === self.activeIndex ? 'btn active' : 'btn'">
        <div class="text">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, onMounted, PropType, reactive, ref } from 'vue'
export interface list {
  title: string
}
// name: 'index',
const props = defineProps({
  list: {
    type: Array as PropType<list[]>,
    default: () => [
      {
        title: '城市全景'
      },
      {
        title: '城市治理'
      },
      {
        title: '生态环境'
      },
      {
        title: '经济发展'
      },
      {
        title: '公共安全'
      },
      {
        title: '联动指挥'
      }
    ]
  },
  isMulti: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits<{ (event: 'clicks', item: any, index: number, array: any): void }>()

const handleBarItemClick = (item: any, index: number, array: typeof props.list) => {
  if (self.activeIndex === index) {
    self.activeIndex = -1
  } else {
    self.activeIndex = index
  }
  item.isActive = self.activeIndex === index
  emit('clicks', item, index, array)
}
const self = reactive({
  activeIndex: -1
})
</script>

<style lang="scss" scoped>
.float_list {
  z-index: 99;
  display: flex;
  justify-content: space-around;
  position: fixed;
  // flex-direction: column;
  @include Width(600);
  @include Top(120);
  @include Left(670);
  z-index: 101;

  .btn {
    @include Width(130);
    @include hHeight(40);
    margin-bottom: 10px;
    background: url('./normal.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    .text {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      @include FontSize(14);
      color: #fff;
    }
  }
  & .active {
    // background: url('./二级_BG_click.png') no-repeat !important;
    background-size: 100% 100% !important;

    .text {
      color: #ebc381;
      // font-weight: 700;
    }
  }
}
</style>
